import { View, ScrollView, Image } from '@tarojs/components'
import { useEffect, useState } from "react";
import './index.less'
import data, { CourseDt } from '../util/data';
import Taro from '@tarojs/taro';

const Course = () => {
    const [scrollHeight,] = useState('100vh');
    const [listScrollTop,] = useState(0);
    const [courseList, setCourseList] = useState([] as CourseDt[]);

    const handleImageClick = (url) => {
        Taro.navigateTo({
            url: `/pages/course/course-detail/index?bannerImgUrl=${url}`,
        })
    }

    useEffect(() => {
        setCourseList(data.courseList)
    }, courseList)

    return (
        <View className='wrapper'>
            <ScrollView className='scrollview' style={{ height: scrollHeight }} enableFlex enableBackToTop scrollY scrollTop={listScrollTop}>
                {courseList.map((item) => {
                    return (
                        <View key={item.id} onClick={() => { handleImageClick(item.bannerImgUrl) }}>
                            <Image className='image' src={item.thumbImgUrl} mode='widthFix' />
                        </View>
                    )
                })}
            </ScrollView>
            <View className='im-toolbar'>
            </View>
        </View>
    )
}

export default Course